<template>
  <view class="chat-container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <text class="iconfont icon-back">←</text>
      </view>
      <view class="title">{{sender || '聊天详情'}}</view>
      <view class="more-btn">
        <text class="iconfont icon-more">⋮</text>
      </view>
    </view>
    
    <!-- 聊天内容 -->
    <scroll-view class="chat-content" scroll-y scroll-into-view="msg-bottom" :style="contentStyle">
      <template v-if="isLoaded">
        <!-- 时间提示 -->
        <view class="time-tip">今天 14:30</view>
        
        <!-- 对方消息 -->
        <view class="message-item other">
          <view class="avatar">
            <image v-if="senderAvatar" :src="senderAvatar" mode="aspectFill"></image>
            <view v-else class="default-avatar">{{senderInitial}}</view>
          </view>
          <view class="message-bubble">
            <view class="message-text">你好，有什么可以帮到你的吗？</view>
          </view>
        </view>
        
        <!-- 我的消息 -->
        <view class="message-item mine">
          <view class="message-bubble">
            <view class="message-text">嗨，我想咨询一下关于订单的问题</view>
          </view>
        </view>
        
        <!-- 对方消息 -->
        <view class="message-item other">
          <view class="avatar">
            <image v-if="senderAvatar" :src="senderAvatar" mode="aspectFill"></image>
            <view v-else class="default-avatar">{{senderInitial}}</view>
          </view>
          <view class="message-bubble">
            <view class="message-text">好的，请问是哪个订单呢？请提供一下订单号或者订单相关信息。</view>
          </view>
        </view>
        
        <!-- 时间提示 -->
        <view class="time-tip">5分钟前</view>
        
        <!-- 我的消息 -->
        <view class="message-item mine">
          <view class="message-bubble">
            <view class="message-text">我的订单号是SH20230401，请帮我查询一下状态</view>
          </view>
        </view>
      </template>
      <!-- 底部定位元素 -->
      <view id="msg-bottom"></view>
    </scroll-view>
    
    <!-- 底部输入框 -->
    <view class="input-area">
      <view class="voice-btn">
        <text class="iconfont icon-voice">🎤</text>
      </view>
      <view class="input-wrapper">
        <input type="text" v-model="messageText" placeholder="请输入消息..." confirm-type="send" @confirm="sendMessage" />
      </view>
      <view class="emoji-btn">
        <text class="iconfont icon-emoji">😊</text>
      </view>
      <view class="send-btn" @click="sendMessage">发送</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sender: '',
      messageText: '',
      senderAvatar: '',
      senderInitial: '消',
      isLoaded: false,
      contentStyle: {
        opacity: 0
      }
    }
  },
  // 使用onLoad处理参数
  onLoad(options) {
    // 简化参数获取
    if (options && options.sender) {
      try {
        this.sender = decodeURIComponent(options.sender);
        this.senderInitial = this.sender.charAt(0);
        this.setSenderAvatar();
      } catch (e) {
        console.error('解析参数错误:', e);
      }
    }
    
    // 延迟加载聊天内容以提高性能
    setTimeout(() => {
      this.isLoaded = true;
      this.contentStyle = { opacity: 1 };
    }, 50);
  },
  methods: {
    // 设置头像
    setSenderAvatar() {
      // 根据发送者类型设置头像
      switch(this.sender) {
        case '订单消息':
          this.senderAvatar = '';
          break;
        case '互动消息':
          this.senderAvatar = '';
          break;
        case '系统消息':
          this.senderAvatar = '';
          break;
        case '果汁分你一半':
          this.senderAvatar = '/static/images/avatar1.jpg';
          break;
        case '飞来飞去':
          this.senderAvatar = '/static/images/avatar2.jpg';
          break;
        default:
          this.senderAvatar = '';
      }
    },
    
    // 返回上一页
    goBack() {
      // 直接使用reLaunch跳转到消息列表，避免返回堆栈问题
      uni.reLaunch({
        url: '/pages/message/index'
      });
    },
    
    // 发送消息
    sendMessage() {
      if (!this.messageText.trim()) return;
      
      // 这里应该调用API发送消息，这里仅做演示
      console.log('发送消息:', this.messageText);
      
      // 发送后清空输入框
      this.messageText = '';
    }
  }
}
</script>

<style lang="scss">
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f8f8f8;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #fff;
  border-bottom: 1px solid #eee;
  
  .back-btn, .more-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      font-size: 40rpx;
      color: #333;
    }
  }
  
  .title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    padding: 0 20rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.chat-content {
  flex: 1;
  padding: 20rpx 30rpx;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.3s;
  
  .time-tip {
    text-align: center;
    font-size: 24rpx;
    color: #999;
    margin: 30rpx 0;
  }
  
  .message-item {
    display: flex;
    margin-bottom: 30rpx;
    
    &.other {
      align-items: flex-start;
      
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20rpx;
        background: #e0e0e0;
        
        image {
          width: 100%;
          height: 100%;
        }
        
        .default-avatar {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #4080ff;
          color: #fff;
          font-size: 32rpx;
        }
      }
      
      .message-bubble {
        background: #fff;
        border-radius: 0 16rpx 16rpx 16rpx;
        position: relative;
        
        &:before {
          content: '';
          position: absolute;
          left: -16rpx;
          top: 20rpx;
          border: 8rpx solid transparent;
          border-right-color: #fff;
        }
      }
    }
    
    &.mine {
      flex-direction: row-reverse;
      
      .message-bubble {
        background: #4080ff;
        border-radius: 16rpx 0 16rpx 16rpx;
        position: relative;
        
        .message-text {
          color: #fff;
        }
        
        &:before {
          content: '';
          position: absolute;
          right: -16rpx;
          top: 20rpx;
          border: 8rpx solid transparent;
          border-left-color: #4080ff;
        }
      }
    }
    
    .message-bubble {
      max-width: 70%;
      padding: 20rpx 24rpx;
      
      .message-text {
        font-size: 30rpx;
        line-height: 1.5;
        word-break: break-all;
      }
    }
  }
}

.input-area {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #fff;
  border-top: 1px solid #eee;
  
  .voice-btn, .emoji-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      font-size: 40rpx;
      color: #666;
    }
  }
  
  .input-wrapper {
    flex: 1;
    background: #f5f5f5;
    border-radius: 8rpx;
    margin: 0 20rpx;
    padding: 10rpx 20rpx;
    
    input {
      width: 100%;
      height: 60rpx;
      font-size: 28rpx;
    }
  }
  
  .send-btn {
    width: 120rpx;
    height: 60rpx;
    background: #4080ff;
    color: #fff;
    border-radius: 8rpx;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style> 